Today, on online shopping web sites a diversity of products is usually displayed using multiple web pages, each containing a group of items with a common theme. These web pages are usually arranged in a hierarchy. For example, there would be separate web pages corresponding to different hierarchical levels of a regular department store, such as departments, aisles, shelves, sub-shelves, etc.
In order to buy a specific product, the user usually locates a link to the department the product is believed to be in. Clicking the link usually launches a list of the shelves of the department. The user then proceeds to click on the shelf that is most likely to contain the item the user is looking for. Clicking the ‘shelf’ in many cases provides the user with yet another list of ‘subshelves’, each sub-shelf having a name which describes a smaller more coherent group of products for sale. Selecting a ‘sub-shelf’ link may then cause a new web page to load, displaying a list of items for sale.
This list of items for sale is usually comprised of product names, related images, and/or additional information/elements arranged in tables or grid type arrangements that divide the web page into cells. In each cell the product name and sometimes the related image and/or additional information/elements are displayed. For example, the product might be coupled with additional information, such as the product price, a short product description, price per unit information, an assortment of indication icons revealing nutritional information about the product and/or other such values. Displayed elements related to the product may also or instead include interactive elements such as buttons, for example for allowing the user to buy an item, change buying quantity and/or view information about the product. Cells in the above described grid arrangements may or may not be separated with visible grid lines.
Such hierarchies as described above and related product lists are employed by many online shopping sites such as online supermarket stores, electronic equipment stores, office supply stores and so forth.
Online supermarkets typically although not necessarily employ two display methods for displaying groceries for sale (described below as method A and method B):
Method A: Items List
Many online grocery shops display groceries for sale in a list that is divided into rows. Each row in the list usually contains only a single grocery product, including for example the product name, product image and in many cases additional description, informative icons and interactive elements for adding or removing the grocery product to or from the shopping cart.
The result of such a display method is in many cases the display of very few products on the page, for example as allocated by the web site, and/or the use of small images. A lot of display area is ‘wasted’, since the product image, product name, interactive elements, and/or description of the product only utilize a small portion of the entire available screen, and the next product can only be presented, according to this method, in a new row below the existing row. In a typical online supermarket employing this method a user viewing his computer monitor, on which the web site is displayed, will be exposed to no more than 4 to 6 products at a time.
Method B: Item Tables—Fixed Grid
To display more grocery products per display area, some online stores display several products in a row. In this case the products are usually displayed in a table or a grid system. The name, description and/or related interactive elements of the product are then usually placed above, below or to the right of the product image.
These tables used for displaying the products, have fixed cell width, meaning that all cells in a table, have the same width. For example, fixed cell width tables are commonly used when HTML tables are employed for the layout of the page.
A fixed cell width is inefficient by definition, since a single cell width cannot be optimal for all product images, given a variety of product sizes, and/or a variety of image proportions. For example if an online supermarket website employing display Method B, wants to display all the toothpastes in a single web page, the website will need to accommodate two types of images typically associated with toothpastes. One type of toothpaste image has a horizontal orientation (wide image), meaning that the width of the image is much larger than the height, i.e. the toothpaste box is displayed lying down, making the text on the toothpaste box which runs across the width of the box, readable. On the other hand, another type of toothpaste image, for example for a toothpaste pump or for a plastic bottle of toothpaste, has a vertical orientation (narrow image), meaning that the height of the image is much larger than the width. If cell size is set to be wide enough to display the horizontally oriented images in a minimally accepted size, then this accommodation may mean that the cells displaying the vertically oriented images will have a lot of empty unused space (‘white space’ herein below), to the right and left of the image. If on the other hand the cell width is set to a narrower size, so as to not waste space on the narrower images, then the images of the horizontally oriented toothpaste boxes, would need to be scaled down considerably to fit the narrow size. Yet another method would be to find an ‘optimal’ fixed cell size that presents the best compromise between the two different image proportions.
In summary it can be said, that while pages displayed using Method B, display more products than in Method A, per a given web page, the use of the display area is still not optimal in method B because all cell widths used to display the items are fixed. The usage of a fixed cell width causes for example a lot of image display area to be wasted on white spaces, and/or for example requires some images to be displayed smaller in size because a compromise has had to be made to accommodate for different image proportions while at the same time displaying a certain number of products in a row.